{extend name="public/list_page"/}
{block name="content"}
<div class="layui-card">
    <div class="layui-card-body">
        <div class="page-wrapper">
            <div class="demo-side">
                <table id="list"></table>
            </div>
        </div>
    </div>
</div>
{/block}

{block name="custom"}
<script type="text/html" id="toolbar">
    <button class="layui-btn layui-btn-sm layui-btn-normal" lay-event="add"><i class="layui-icon">&#xe654;</i>添加</button>
    <button class="layui-btn layui-btn-sm layui-btn-normal" lay-event="expandAll">全部展开</button>
    <button class="layui-btn layui-btn-sm layui-btn-normal" lay-event="foldAll">全部折叠</button>
</script>

<script type="text/html" id="isMenu">
    {{# if(d.is_menu == 1){}}
    <button type="button" class="layui-btn layui-btn-sm layui-btn-normal" title="是否菜单">是</button>
    {{# } else {}}
    <button type="button" class="layui-btn layui-btn-sm layui-btn-primary" title="是否菜单">否</button>
    {{# } }}

</script>

<script type="text/html" id="isRecommended">
    <input type="checkbox" name="is_recommended" value="{{d.id}}" lay-skin="switch" lay-text="推荐|推荐" lay-filter="isRecommended" {{ d.is_recommended == 1 ? 'checked' : '' }}>
</script>

<script type="text/html" id="isDel">
    <input type="checkbox" name="status" value="{{d.id}}" lay-skin="switch" lay-text="显示|隐藏" lay-filter="isDel" {{ d.status == 1 ? 'checked' : '' }}>
</script>

<script type="text/html" id="barHandle">
    <button type="button" class="layui-btn handel-btn layui-btn-primary" lay-event="edit" title="编辑"><i class="fa fa-pencil-square-o"></i></button>
    <button type="button" class="layui-btn handel-btn layui-btn-del" lay-event="del" title="删除"><i class="fa fa-trash-o"></i></button>
</script>
{/block}

{block name="js"}
<script>
    layui.config({
        base: '__STATIC__/js/'
    }).use(['layer', 'util', 'treeTable','form'], function () {
        var $ = layui.jquery,
            layer = layui.layer,
            util = layui.util,
            form = layui.form,
            treeTable = layui.treeTable;
        $('body').removeClass('layui-hide');

        // 渲染表格
        var sectionTreeTb = treeTable.render({
            elem: '#list',
            method:'post',
            url: "{:url('section/index')}",
            toolbar:"#toolbar",
            defaultToolbar: [],
            treeDefaultClose: false,	//是否默认折叠
            treeLinkage: false,		//父级展开时是否自动展开所有子级
            tree: {
                iconIndex: 1,//三角形图标在哪一列，从0开始
                isPidData: true,
                idName: 'id',
                pidName: 'pid',
                openName:'open',
                // getIcon:function (d) {
                //     console.log(d)
                //     //自定义图标 ew-tree-icon 是必须的
                //     if (d.children&&d.children.length>0){
                //         return '<i class="ew-tree-icon layui-icon">&#xe66b;</i>';
                //     }else {
                //         return '<i class="ew-tree-icon layui-icon">&#xe671;</i>';
                //     }
                // },
            },
            response:{
                statusCode:'suc'
            },
            cols: [[
                {field:'id',title:'ID',width:80,align:'center'},
                {field:'name',title:'名称'},
                {field:'url',title:'url'},
                {field:'sort',title:'排序'},
                {field:'is_recommended',title:'推荐',templet: '#isRecommended'},
                {field:'status',title:'状态',templet: '#isDel'},
                {field:'right',title:'操作',align:'center',width:'20%',toolbar:'#barHandle'}
            ]]

        });

        //监听头部工具栏点击
        treeTable.on('toolbar(list)',function (obj) {
            if (obj.event == 'add') {
                xadmin.open('添加栏目',"{:url('section/add')}")
            }else if(obj.event == 'expandAll'){
                sectionTreeTb.expandAll();
            }else if(obj.event == 'foldAll'){
                sectionTreeTb.foldAll();
            }
        })

        // 监听工具列点击事件
        treeTable.on('tool(list)', function (obj) {
            var event = obj.event;
            let id = obj.data.id;
            let url = '';
            if (event === 'del') {
                url = "{:url('section/del')}"
                layer.confirm('确认删除？',{title:''},function () {
                    ajaxRequest(url,{id:id},function (res) {
                        if (res.code == 'suc') {
                            sucMsg(res.msg,function () {
                                sectionTreeTb.refresh();
                            })
                        }else {
                            errMsg(res.msg)
                        }
                    })
                });
            } else if (event === 'edit') {
                url = "{:url('section/edit')}?id=" + id
                xadmin.open('编辑栏目',url)
            }
        });

        //监听状态操作
        form.on('switch(isDel)',function (obj) {
            let id = obj.value
            let tip = '';
            let type = 1;
            if (obj.elem.checked == true){
                tip = '确定显示？';
            } else {
                tip = '确定隐藏？';
                type = 2;
            }
            layer.confirm(tip,{title:'',btn:['确定','取消'],cancel:function (index,layero) {
                    sectionTreeTb.reload();
                }
            },function (index) {
                var load = layer.load(1,{shade:[0.5,'#FFF']});
                ajaxRequest("{:url('section/changeStatus')}", {id: id, type: type}, function (res) {
                    let icon = 1;
                    if (res.code == 'err') {
                        icon = 2;
                    }
                    layer.msg(res.msg, {icon: icon, time:msgShowTime})
                });
                sectionTreeTb.reload();
                layer.close(load);

            },function () {
                sectionTreeTb.reload()
            })
        });

        form.on('switch(isRecommended)',function (obj) {
            let id = obj.value
            let tip = '';
            let type = 1;
            if (obj.elem.checked == true){
                tip = '确定推荐？';
            } else {
                tip = '取消推荐？';
                type = 2;
            }
            layer.confirm(tip,{title:'',btn:['确定','取消'],cancel:function (index,layero) {
                    sectionTreeTb.reload();
                }
            },function (index) {
                var load = layer.load(1,{shade:[0.5,'#FFF']});
                ajaxRequest("{:url('section/changeRecommendedStatus')}", {id: id, type: type}, function (res) {
                    if (res.code == 'suc') {
                        sucMsg(res.msg)
                    } else {
                        errMsg(res.msg)
                    }
                });
                sectionTreeTb.reload();
                layer.close(load);
            },function () {
                sectionTreeTb.reload()
            })
        });

    });
</script>
{/block}